<template>
  <div>
    <el-steps :active="activeStep" simple style="margin-top: 20px">
      <el-step title="申请" :status="step1" icon="el-icon-edit" @click.native="handleStep(1)"
        style="cursor: pointer;"></el-step>
      <el-step title="询价" :status="step2" icon="el-icon-phone" @click.native="handleStep(2)"
        style="cursor: pointer;"></el-step>
      <el-step title="订单" :status="step3" icon="el-icon-s-order" @click.native="handleStep(3)"
        style="cursor: pointer;"></el-step>
      <el-step title="验收" :status="step4" icon="el-icon-s-check" @click.native="handleStep(4)"
        style="cursor: pointer;"></el-step>
    </el-steps>
    <div class="bodyBox">
      <div class='planTit'>{{showTitle}}</div>
      <div class='bodyRow' v-if="activeStep == 1">
        <div class="bodyInfo">
          <div class='row'>申请单号： <a>PA-P25022502</a></div>
          <div class='row'>申请船舶： <a>华福油5</a></div>
          <div class='row'>申请人员： <a>张三-船员</a></div>
          <div class='row'>申请部门： <a>轮机部</a></div>
          <div class='row'>备件名称： <a>厚六角螺母GB/T6176-2000</a></div>
          <div class='row'>备件规格： <a>M16</a></div>
          <div class='row'>申购数量： <a>10</a></div>
          <div class='row'>计量单位： <a>个</a></div>
        </div>
        <div class="bodyDetail">
          <el-timeline>
            <el-timeline-item timestamp="申请" placement="top" type='primary'>
              <el-card>
                <h4>申请人：张三-轮机部-船员</h4>
                <p>申请时间：2025/4/12 20:46</p>
                <p>申请附言：-</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="审批" placement="top" type='success'>
              <el-card>
                <h4>审批人：李四-轮机部-轮机经理</h4>
                <p>审批时间：2025/4/12 20:46</p>
                <p>审批附言：-</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="审批" placement="top" type='success'>
              <el-card>
                <h4>审批人：王五-机务部-机务经理</h4>
                <p>审批时间：2025/4/12 20:46</p>
                <p>审批附言：-</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class='bodyRow' v-if="activeStep == 2">
        <div class="bodyInfo">
          <div class='row'>申请单号： <a>PA-P25022502</a></div>
          <div class='row'>采购人员： <a>丁六-采购</a></div>
          <div class='row'>所属部门： <a>综合部</a></div>
          <div class='row'>采购备件： <a>厚六角螺母GB/T6176-2000</a></div>
          <div class='row'>备件规格： <a>M16</a></div>
          <div class='row'>采购数量： <a>10</a></div>
          <div class='row'>计量单位： <a>个</a></div>
        </div>
        <div class="bodyDetail">
          <el-timeline>
            <el-timeline-item timestamp="台州展鸿船舶设备有限公司" placement="top" type='success'>
              <el-card>
                <h4>报价人：李文武</h4>
                <p>报价单价：100</p>
                <p>报价总额：1000</p>
                <p>报价方式：小程序报价</p>
                <p>付款方式：货到付款</p>
                <p>报价时间：2025/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="舟山市捷宏贸易有限公司" placement="top" type='danger '>
              <el-card>
                <h4>报价人：张志伟</h4>
                <p>报价单价：110</p>
                <p>报价总额：1100</p>
                <p>报价方式：小程序报价</p>
                <p>付款方式：货到付款</p>
                <p>报价时间：2025/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="福州市亮舟船舶物资有限公司" placement="top" type='danger '>
              <el-card>
                <h4>报价人：凌薇</h4>
                <p>报价单价：110</p>
                <p>报价总额：1100</p>
                <p>报价方式：小程序报价</p>
                <p>付款方式：立即结算</p>
                <p>报价时间：2025/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="自购渠道商" placement="top" type='danger '>
              <el-card style="width: 400px;">
                <h4>报价人：王怡</h4>
                <p>报价单价：120</p>
                <p>报价总额：1200</p>
                <p>报价方式：内部系统填报</p>
                <p>付款方式：账期付款</p>
                <p>经办人：丁六-综合部-采购</p>
                <p>报价时间：2025/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class='bodyRow' v-if="activeStep == 3">
        <div class="bodyInfo">
          <div class='row'>申请单号： <a>PA-P25022502</a></div>
          <div class='row'>采购人员： <a>丁六-采购</a></div>
          <div class='row'>所属部门： <a>综合部</a></div>
          <div class='row'>采购备件： <a>厚六角螺母GB/T6176-2000</a></div>
          <div class='row'>备件规格： <a>M16</a></div>
          <div class='row'>采购数量： <a>10</a></div>
          <div class='row'>计量单位： <a>个</a></div>
          <div class='planTit' style="margin-left: -10px;">采购信息</div>
          <div class='row'>采购对象： <a>台州展鸿船舶设备有限公司</a></div>
          <div class='row'>采购对接： <a>李文武-15457413215</a></div>
          <div class='row'>结算账号： <a>60210 121 841 152 150 151</a></div>
          <div class='row'>税务识别： <a>94845S48DF145AC1</a></div>
          <div class='row'>开票名称： <a>台州展鸿船舶设备有限公司</a></div>
          <div class='row'>采购备件： <a>厚六角螺母GB/T6176-2000</a></div>
          <div class='row'>备件规格： <a>M16</a></div>
          <div class='row'>采购数量： <a>10</a></div>
          <div class='row'>计量单位： <a>个</a></div>
          <div class='row'>采购单价： <a>100</a></div>
          <div class='row'>采购总额： <a>1000</a></div>
          <div class='row'>付款方式： <a>货到付款</a></div>
          <div class='row'>合同附件：  <el-button type="primary" size="mini" icon="el-icon-s-order">查看</el-button></div>
        </div>
        <div class="bodyDetail">
          <el-timeline>
            <el-timeline-item timestamp="采购订单" placement="top" type='warning '>
              <el-card style="width: 500px;">
                <h4>经办人：李莉莉-综合部-财务</h4>
                <p>合同总额：1000(含税)</p>
                <p>合同状态：已签订</p>
                <p>结算状态：待结算</p>
                <p>付款方式：对公付款</p>
                <p>付款时间：-</p>
                <div style="text-align: right;">
                  <el-button type="danger" size="medium" icon="el-icon-warning" disabled>作废</el-button>
                  <el-button type="primary" size="medium" icon="el-icon-s-finance">执行</el-button>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class='bodyRow' v-if="activeStep == 4">
        <div class="bodyInfo">
          <div class='row'>申请单号： <a>PA-P25022502</a></div>
          <div class='row'>申请船舶： <a>华福油5</a></div>
          <div class='row'>申请人员： <a>张三-船员</a></div>
          <div class='row'>申请部门： <a>轮机部</a></div>
          <div class='row'>备件名称： <a>厚六角螺母GB/T6176-2000</a></div>
          <div class='row'>备件规格： <a>M16</a></div>
          <div class='row'>申购数量： <a>10</a></div>
          <div class='row'>计量单位： <a>个</a></div>
        </div>
        <div class="bodyDetail">
          <el-timeline>
            <el-timeline-item timestamp="审批" placement="top" type='info'>
              <el-card>
                <h4>审批人：李四-轮机部-轮机经理</h4>
                <p>审批时间：-</p>
                <p>审批附言：-</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="验收" placement="top" type='info'>
              <el-card>
                <h4>验收人：张三-轮机部-船员</h4>
                <p>验收时间：-</p>
                <p>是否入库：-</p>
                <p>验收附言：-</p>
              </el-card>
            </el-timeline-item>

          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeStep: 3,
        step1: 'success',
        step2: 'success',
        step3: 'finish',
        step4: 'wait',
        titleList:['采购申请','询价管理','采购订单','船舶验收'],
        showTitle:'采购订单'
      }
    },

    methods: {
      handleStep(index) {
        this.activeStep = index;
        this.showTitle = this.titleList[index - 1]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bodyBox {
    padding: 20px;
    height: calc(100vh - 120px);
    overflow: auto;
  }

  .bodyRow {
    width: 100%;
    display: flex;

    .bodyInfo {
      padding: 10px;
      width: 400px;
      .row {
        font-size: 15px;
        font-weight: bold;
        color: #606266;
        line-height: 35px;
        box-sizing: border-box;
        a{font-size: 14px;font-weight: 400;color: #777;}
      }
    }
  }
</style>
